<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
					margin: 0;
					padding: 0;
			}
			
			/* div{
				width: 100px;
				height: 100px;
				background-color: red;
				overflow: hidden;
			} */
			
			
			/* .box1{
				background-color: red;
				overflow: hidden;
				*zoom:1;
			}
			
			
			.box2{
				background-color: pink;
					 
		 
			}
			
			.box1 p{
				width: 100px;
				background-color: blue;
				float: left;
			}
			.box2 p{
				width: 100px;
				background-color: yellow;
				float: left;
			} */
			
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
				overflow: hidden;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: blue;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 overflow: hidden;
		 1.可以将超出标签范围的内容裁剪掉
		 2.清除浮动
		 3.可以通过  overflow: hidden; 可以让里面的盒子设置
		 margin-top之后 外面的盒子不被顶下来
		 
		 
		 -->
		
		<!-- <div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div> -->
	
	<!-- <div class="box1">
		<p>我是文字1</p>
		<p>我是文字1</p>
		<p>我是文字1</p>
	</div>
	
	
	<div class="box2">
		<p>我是文字2</p>
		<p>我是文字2</p>
		<p>我是文字2</p>
	</div> -->
	
	
	<div class="box1">
		<div class="box2"></div>
	</div>
	</body>
</html>